import style from './index.module.css'
import Nabar from '../../conpoment/Nabar'
import { List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index() {
  const navigate = useNavigate()

  const handleAccountManagement = () => {
    navigate('/account_management')
  }

  const handleMessageSettings = () => {
    navigate('/message_settings')
  }

  return (
    <div className={style.page}>
      <Nabar title='系统设置' sticky={false} />
      <div className={style.card}>
        <List>
          <List.Item arrow={false} extra={<span className={style.enabled}>已开启</span>}>
            新消息通知
          </List.Item>
        </List>
      </div>
      <div className={style.card}>
        <List>
          <List.Item arrow>隐私</List.Item>
          <List.Item arrow>个人信息收集清单</List.Item>
          <List.Item arrow>第三方信息共享清单</List.Item>
             <List.Item arrow onClick={handleAccountManagement}>账号管理</List.Item>
          <List.Item arrow onClick={handleMessageSettings}>消息设置</List.Item>
        </List>
      </div>
      <div className={style.card}>
        <List>
          <List.Item arrow={false} extra={<span className={style.version}>V6.4.37</span>}>
            当前版本
          </List.Item>
             <List.Item arrow={false} extra={<span className={style.version}>66M</span>}>
            清除缓存
            <p style={{fontSize:'12px',color:'#999',marginTop:'4px'}}>包括：缓存历史界面数据、个人授权信息</p>
          </List.Item>
        </List>
      </div>
    </div>
  )
}
export default Index